<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
           /* 属性选择器  */
           /* [class]{
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
            [class="abc"]{
                background-color: skyblue;
            } */
            /* 选择某个元素后面的元素 */
            /* #d1+div{
                width: 300px;
                height: 300px;
                background: skyblue;
            } */
            /* 选择某个元素后面的多个元素 */
            /* #d1~div{
                width: 300px;
                height: 300px;
                background-color: wheat;
            } */
            /* 直接子元素选择器 */
            /* .parent>div{
                width: 200px;
                height: 200px;
                background-color:skyblue;
            } */
            /* 子元素选择 */
            /* li:nth-child(1){
                width: 100px;
                height: 100px;
                background-color: #cea;
            }
            li:nth-child(3){
                width: 100px;
                height: 100px;
                background-color: #dad;
            } */

            /* 伪元素 */

            .d1{
                width: 200px;
                line-height: 40px;
                margin: 0 auto;
                padding: 5px;
                border-radius: 8px;
                background-color: greenyellow;
                position: relative;
            }
            .d1::before{
                width: 0px;
                height: 0px;
                border-top: 10px solid transparent;
                border-right: 15px solid greenyellow;
                border-bottom: 10px solid transparent;
                border-left: 15px solid transparent;
                content: "";
                display: inline-block;
                position: absolute;
                left: -30px;
                top: 15px;
            }
            .d1::after{
                content: "";
            }
        </style>
    </head>
    <body>
        <!-- <div class="parent">
            <div id="d1">
                <div class="aaa">
                    hello
                </div>
            </div>
            <div class="abc">helloworld1</div>
            <div class="cba">helloworld2</div>
            <ul>
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>
        </div> -->

        <div class="d1">今晚吃啥？</div>
    </body>
</html>